<template>
  <div>
    <h3>帅鹏黑店</h3>
    <!-- 
      父传子语法：
        1. 父组件通过给子组件，添加标签属性传值
        2. 子组件内部，通过 props 接收

      子传父语法：
        1. 子组件中 this.$emit('自定义事件名', 参数)
        2. 父组件中 注册对应的事件监听，处理触发的事件
           <Son @自定义事件名="处理函数"></Son>
     -->
    <!-- 
      <my-product title="超级无敌手枪腿" price="12" info="绝了"></my-product>
      <my-product title="超级好吃大西瓜" price="50" info="美了"></my-product>
      <my-product title="超级美味大闸蟹" price="99" info="醉了"></my-product> 
    -->
    <my-product 
      v-for="item in list" 
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :info="item.desc"
      :pid="item.id"
      @sayPrice="handleSayPrice"
    >
    </my-product>
  </div>
</template>

<script>
import MyProduct from './components/my-product.vue'
export default {
  components: {
    MyProduct
  },
  data () {
    return {
      list: [
        { id: 1, proname: '超级好吃棒棒糖', proprice: 188, low: 160, desc: '甜' },
        { id: 2, proname: '超级好吃的大鸡腿', proprice: 360, low: 320, desc: '香' },
        { id: 3, proname: '超级无敌冰激凌', proprice: 42, low: 30, desc: '冰' }
      ]
    }
  },
  methods: {
    handleSayPrice (price, id) {
      // console.log('收到了砍价申请 id:', id, 'price: ', price)
      const good = this.list.find(item => item.id === id)

      if (good.proprice - price > good.low) {
        good.proprice -= price
      } else {
        good.proprice = good.low
        alert('大兄弟呀，成本价了，不能再砍了~')
      }
    }
  }
}
</script>

<style>

</style>